.text(){
    // 单行省略号显示
  .ellipsis() {
    overflow: hidden;
    -ms-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  //多行超出省略号
  /*
  *lineNum: 参数，行数
  */
  .ellipsisLine(@lineNum : 2) {
    word-break: break-all;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: @lineNum;
    overflow: hidden;
  }
}

/**
* flex布局封装
*
* 类名命名规则：
*
*     f-{主轴方向}-{justify-content}-{align-items} 
*
*     主轴方向： row横向、col纵向、rr横向反转主轴、cr纵向反转主轴
*
*     justify-content、align-items规则：
*         s:flex-start
*         e:flex-end
*         c:center
*         b:space-between
*         a:space-around
*
*     特定类名：
*         f：开启flex布局，不进行其他设置
*         f-w：允许换行，flex-wrap缩写
*         f-d-z:禁止缩放，flex-disabled-zoom flex:0 0 auto;缩写
*         f-z:允许缩放，flex-zoom flex:1 1 auto;缩写
*/
.test(@a,@b){
  &-box{
    height: @a;
    width: @b;
    background: red;
  }
}

.flex-align-items-mixins(@flexDirection, @justifyContent) {

  &-s {
    display: flex;
    flex-direction: @flexDirection;
    justify-content: @justifyContent;
    align-items: flex-start;
  }

  &-c {
    display: flex;
    flex-direction: @flexDirection;
    justify-content: @justifyContent;
    align-items: center;
  }

  &-e {
    display: flex;
    flex-direction: @flexDirection;
    justify-content: @justifyContent;
    align-items: flex-end;
  }
}

.flex-mixins(@flexDirection) {
  display: flex;
  flex-direction: @flexDirection;

  &-s {
    display: flex;
    flex-direction: @flexDirection;
    justify-content: flex-start;
    .flex-align-items-mixins(@flexDirection, flex-start)
  }

  &-c {
    display: flex;
    flex-direction: @flexDirection;
    justify-content: center;
    .flex-align-items-mixins(@flexDirection, center)
  }

  &-e {
    display: flex;
    flex-direction: @flexDirection;
    justify-content: flex-end;
    .flex-align-items-mixins(@flexDirection, flex-end)
  }

  &-b {
    display: flex;
    flex-direction: @flexDirection;
    justify-content: space-between;
    .flex-align-items-mixins(@flexDirection, space-between)
  }

  &-a {
    display: flex;
    flex-direction: @flexDirection;
    justify-content: space-around;
    .flex-align-items-mixins(@flexDirection, space-around)
  }
}

.f {
  display: flex;

  &-d-z {
    display: flex;
    // 禁止缩放
    flex: 0 0 auto;
  }

  &-z {
    display: flex;
    // 禁止缩放
    flex: 1 1 auto;
  }

  &-w {
    display: flex;
    // 允许换行
    flex-wrap: wrap;
  }

  &-row {
    display: flex;
    // 横向主轴
    .flex-mixins(row)
  }

  &-col {
    display: flex;
    // 纵向主轴
    .flex-mixins(column)
  }

  &-rr {
    display: flex;
    // 横向反转主轴
    .flex-mixins(row-reverse)
  }

  &-cr {
    display: flex;
    // 纵向反转主轴
    .flex-mixins(column-reverse)
  }

}
